<template>
  <div class="attemdamce-form">
    <div class="attemdamce-form-f">
      <a-form :model="formState" layout="vertical" name="basic" autocomplete="off" @finish="onFinish"
        @finishFailed="onFinishFailed">
        <a-row>
          <a-col :span="8">
            <a-form-item label="是否离岗" name="isLeaven" :rules="[{ required: true, message: '请选择是否离岗' }]">
              <a-switch v-model:checked="formState.isLeaven" checked-children="开" un-checked-children="关" />
            </a-form-item>
          </a-col>



          <a-col :span="8">
            <a-form-item label="是否睡岗" name="isSleep" :rules="[{ required: true, message: '请选择是否睡岗' }]">
              <a-switch v-model:checked="formState.isSleep" checked-children="开" un-checked-children="关" />
            </a-form-item>

          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="是否使用电子设备" name="isUseElectronic" :rules="[{ required: true, message: '请选择是否使用电子设备' }]">
              <a-switch v-model:checked="formState.isUseElectronic" checked-children="开" un-checked-children="关" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否做与工作无关的行为" name="isNoWorking"
              :rules="[{ required: true, message: '请选择是否做与工作无关的行为' }]">
              <a-switch v-model:checked="formState.isNoWorking" checked-children="开" un-checked-children="关" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <a-form-item label="是否着装规范" name="isNoClothing" :rules="[{ required: true, message: '请选择是否着装规范' }]">
              <a-switch v-model:checked="formState.isNoClothing" checked-children="开" un-checked-children="关" />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="是否资质与席位不符" name="isNotEligible" :rules="[{ required: true, message: '请选择是否资质与席位不符' }]">
              <a-switch v-model:checked="formState.isNotEligible" checked-children="开" un-checked-children="关" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-item label="人员数量要求" name="minimumStaffType" :rules="[{ required: true, message: '请选择人员数量要求' }]">
              <a-radio-group v-model:value="formState.minimumStaffType" @change="handleMinimumStaffTypeChange"
                button-style="solid">
                <a-radio-button value="0">不设置</a-radio-button>
                <a-radio-button value="1">事件岛</a-radio-button>
                <a-radio-button value="2">航班岛</a-radio-button>
                <a-radio-button value="3">资源岛</a-radio-button>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" v-if="formState.minimumStaffType!=0">
            <div class="item-text">
              早班时段 <a-time-picker class="form-item" v-model:value="formState.eventStartTime" value-format="HH:mm" /> -
              <a-time-picker class="form-item" v-model:value="formState.eventEndTime" value-format="HH:mm" />
              时段人员参考其排班表满员状态；<a-time-picker class="form-item" v-model:value="formState.eventSectionStartTime"
                value-format="HH:mm" /> - <a-time-picker class="form-item" v-model:value="formState.eventSectionEndTime"
                value-format="HH:mm" /> 至少 <a-input-number class="form-item" v-model:value="formState.eventPersonNum"
                :min="1" /> 人在岗
            </div>
            <div class="item-text">
              晚班时段 <a-time-picker class="form-item" v-model:value="formState.eventWanStartTime" value-format="HH:mm" />
              - <a-time-picker class="form-item" v-model:value="formState.eventWanEndTime" value-format="HH:mm" />
              至少 <a-input-number class="form-item" v-model:value="formState.eventWanPersonNum" :min="1" /> 人在岗；
              <a-time-picker class="form-item" v-model:value="formState.eventWanSectionStartTime"
                value-format="HH:mm" /> - <a-time-picker class="form-item"
                v-model:value="formState.eventWanSectionEndTime" value-format="HH:mm" />
              至少 <a-input-number class="form-item" v-model:value="formState.eventWanSectionPersonNum" :min="1" /> 人在岗；
              <a-time-picker class="form-item" v-model:value="formState.eventWanSectionSecondStartTime"
                value-format="HH:mm" /> - <a-time-picker class="form-item"
                v-model:value="formState.eventWanSectionSecondEndTime" value-format="HH:mm" />
              至少 <a-input-number class="form-item" v-model:value="formState.eventWanSectionSecondPersonNum" :min="1" />
              人在岗。
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <div class="item-title">
              告警规则
            </div>
            <div class="item-text text_indent">
              <span style="font-weight: 800;">1、人员数量缺少告警</span>：当系统通过功能岛各席位图像综合识别检测到大于  <a-input-number class="form-item" v-model:value="formState.gaoNum" :min="1" /> 分钟坐席场地中的实际坐席人员数量少于预设的最低人数时，触发人员缺勤告警。
            </div>
            <div class="item-text text_indent">
              <span style="font-weight: 800;">2、人员缺席告警</span>：当系统检测个别席位在未有备注（轮休、特殊等情况）下，坐席人员大于   <a-input-number class="form-item" v-model:value="formState.gaoNum" :min="1" /> 分钟缺席时，触发人员缺勤告警。
            </div>
            <div class="item-text text_indent">
              <span style="font-weight: 800;">3、人员特情告警</span>：轮休情况缺席 <a-input-number class="form-item" v-model:value="formState.gaoNum" :min="1" /> 小时以上，触发人员缺勤告警。
            </div>
            <div class="item-text text_indent">
              <span style="font-weight: 800;">4、人员状态异常告警</span>：
            </div>
            <div class="item-text text_indent">
              （1）<a-time-picker class="form-item" v-model:value="formState.gJ1StartTime"
              value-format="HH:mm" /> - <a-time-picker class="form-item" v-model:value="formState.gJ1EndTime"
              value-format="HH:mm" />时间段当系统通过各席位分析发现某个坐席人员在工作时间段内持续查看手机超 <a-input-number class="form-item" v-model:value="formState.gaoNum" :min="1" /> 分钟或<a-input-number class="form-item" v-model:value="formState.gaoNum2" :min="1" />分钟内看手机
              <a-input-number class="form-item" v-model:value="formState.gaoCiShu" :min="1" />次及以上，向该坐席人员发送提示信息。若未响应或连续
              <a-input-number class="form-item" v-model:value="formState.lxCishu" :min="1" />次违规则向后台发送告警通知。
            </div>
            <div class="item-text text_indent">
              （2）<a-time-picker class="form-item" v-model:value="formState.gJ2StartTime"
              value-format="HH:mm" /> - <a-time-picker class="form-item" v-model:value="formState.gJ2EndTime"
              value-format="HH:mm" />时间段当系统通过各席位分析发现某个坐席人员在工作时间段内闭眼超过 
              <a-input-number class="form-item" v-model:value="formState.gaoNum" :min="1" />
              分钟，向该坐席人员发送提示信息。若未响应或超过
              <a-input-number class="form-item" v-model:value="formState.gaoNum" :min="1" />次违规则向后台发送告警通知。
            </div>
          </a-col>
        </a-row>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }" style="text-align: left;">
          <a-button type="primary" html-type="submit">保存</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive } from 'vue';
import { list, saveOrUpdate } from './GbiacAttendance.api';
interface FormState {
  isLeaven: boolean;
  isSleep: boolean;
  isUseElectronic: boolean;
  isNoWorking: boolean;
  isNoClothing: boolean;
  isNotEligible: boolean;
  minimumStaffType: string;
  eventStartTime: string;//事件岛早班时段
  eventEndTime: string;//事件岛早班时段
  eventSectionStartTime: string;//事件岛早班时段
  eventSectionEndTime: string;//事件岛早班时段
  eventPersonNum: number;//事件岛早班最少人数
  eventWanStartTime: string;//事件岛早班时段
  eventWanEndTime: string;//事件岛早班时段
  eventWanPersonNum: number;//事件岛早班最少人数
  eventWanSectionStartTime: string;//事件岛早班时段
  eventWanSectionEndTime: string;//事件岛早班时段
  eventWanSectionPersonNum: number;
  eventWanSectionSecondStartTime: string;//事件岛早班时段
  eventWanSectionSecondEndTime: string;//事件岛早班时段


  eventWanSectionSecondPersonNum: number;//事件岛早班最少人数
  gaoNum:number;
  gaoNum2:number;
  gaoCiShu:number;
  lxCishu:number;
  gao2Num:number;
  lx2Cishu:number;
  gJ1StartTime:string;
  gJ1EndTime:string;
  gJ2StartTime:string;
  gJ2EndTime:string;
}
let isUpdate: boolean = false;
let id: string = '';
const formState = reactive<FormState>({
  isLeaven: true,
  isSleep: true,
  isUseElectronic: true,
  isNoWorking: true,
  isNoClothing: true,
  isNotEligible: true,
  minimumStaffType: '0',
  eventStartTime: '08:45:00',
  eventEndTime: '11:00:00',
  eventSectionStartTime: '11:00:00',
  eventSectionEndTime: '17:00:00',
  eventPersonNum: 2,
  eventWanStartTime: '17:00:00',
  eventWanEndTime: '00:00:00',
  eventWanSectionStartTime: '00:00:00',
  eventWanSectionEndTime: '06:30:00',
  eventWanSectionSecondStartTime: '06:30:00',
  eventWanSectionSecondEndTime: '08:45:00',
  eventWanPersonNum: 2,
  eventWanSectionPersonNum: 1,
  eventWanSectionSecondPersonNum: 2,
  gaoNum:10,
  gaoNum2:15,
  gaoCiShu:3,
  lxCishu:2,
  gao2Num:10,
  lx2Cishu:2,
  gJ1StartTime:'06:30:00',
  gJ1EndTime: '23:59:00',
  gJ2StartTime:'06:30:00',
  gJ2EndTime: '23:59:00',
});
onMounted(() => {
  getList()
})
async function onFinish(values: any) {
  console.log('Success:', values);
  try {
    let value: any = values
    if (isUpdate) {
      value.id = id;
    }
    await saveOrUpdate(value, isUpdate);
    getList()
  } catch (error) {

  }

};
const handleMinimumStaffTypeChange = (e) => {
  console.log("进来了",e);
  
  switch(e.target.value){
    case '1':
      formState.eventPersonNum = 2;
      formState.eventWanPersonNum = 2;
      formState.eventWanSectionPersonNum = 1;
      formState.eventWanSectionSecondPersonNum = 2;
      break;
    case '2':
      formState.eventPersonNum = 3;
      formState.eventWanPersonNum = 3;
      formState.eventWanSectionPersonNum = 2;
      formState.eventWanSectionSecondPersonNum = 3;
      break;
    case '3':
      formState.eventPersonNum = 2;
      formState.eventWanPersonNum = 2;
      formState.eventWanSectionPersonNum = 1;
      formState.eventWanSectionSecondPersonNum = 2;
      break;
    default:
      formState.eventPersonNum = 0;
      formState.eventWanPersonNum = 0;
      formState.eventWanSectionPersonNum = 0;
      formState.eventWanSectionSecondPersonNum = 0;
  }
}
const getList = () => {
  list({
    pageNo: 1,
    pageSize: 10
  }).then(res => {
    if (res.records && res.records.length) {
      console.log("isUpdate", true);

      isUpdate = true;
      formState.earlyStartTime = res.records[0].earlyStartTime
      formState.earlyEndTime = res.records[0].earlyEndTime
      formState.lateStartTime = res.records[0].lateStartTime
      formState.lateEndTime = res.records[0].lateEndTime
      formState.meetingStartTime = res.records[0].meetingStartTime
      formState.meetingEndTime = res.records[0].meetingEndTime
      id = res.records[0].id
    } else {
      isUpdate = false;
    }
    console.log(res);

  })
}
const onFinishFailed = (errorInfo: any) => {
  console.log('Failed:', errorInfo);
};
</script>

<style lang="less" scoped>
[data-theme="dark"] .attemdamce-form {
  background-color: #151515;
}

[data-theme="dark"] .item-text{
  color: #fff !important;
}
[data-theme="dark"] .item-title {
  color: #fff !important;
}

.attemdamce-form {
  background-color: #ffffff;
  padding: 20px;
  width: 100%;
  height: 100%;

  &-f {}

  .form-item {
    width: 100px;
    margin: 0 10px;
  }

  .item-text {
    display: flex;
    align-items: center;
    color: #000;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
  .text_indent{
    text-indent: 2ch;
  }
  .item-title {
    display: flex;
    align-items: center;
    color: #000;
    font-weight: 800;
    margin-bottom: 10px;
    flex-wrap: wrap;
  }
}

:deep(.ant-picker),
:deep(.ant-input-number) {
  width: 100%;
}
</style>